<template>
	<div>
        <div class="order-head">
            <div class="order-head-icon"><i class="hd-icon">&#xe71e;</i></div>
            <div class="order-head-desc">
                <h3>{{orderinfos.collect_name}} {{orderinfos.collect_phone}}</h3>
                <p>{{orderinfos.province}} {{orderinfos.city}} {{orderinfos.county}} {{orderinfos.collect_address}}</p>
            </div>
        </div>
        <!-- 订单信息 -->
        <div class="order-goods">
            <h2>订单商品</h2>
            <view class="order-goods-list">
                <view class="li" v-for="(item,index) in orderinfos.goodsInfoList" :key="index" @click="go('/pages/goods/details?id='+item.id)">
                    <img :src="item.logo"/>
                    <div>
                        <h3>{{item.title}}</h3>
                        <div>
                            <p>x{{item.buynum}}</p>
                            <p>￥{{item.money}}</p>
                        </div>
                    </div>
                </view>
            </view>
            <!-- 费用信息 -->
            <view class="order-price" v-if="up">
                <view>
                    <h3>商品总价</h3>
                    <p>￥{{orderinfos.order_money}}</p>
                </view>
                <view>
                    <h3>商家改价</h3>
                    <p>￥{{orderinfos.edit_money}}</p>
                </view>
                <view>
                    <h3>快递运费</h3>
                    <p>￥{{orderinfos.peisong_money}}</p>
                </view>
            </view>
            <div class="order-price-ing" @click="upIcon">
                <h3>实际付款（含运费）</h3>
                <p><span>共{{orderinfos.allGoodsNum}}商品</span>￥{{Number(orderinfos.order_money)+Number(orderinfos.edit_money)+Number(orderinfos.peisong_money)}} <i class="hd-icon"  v-if="!up">&#xe603;</i><i v-if="up"  @click="!up" class="hd-icon">&#xe60c;</i></p>
            </div>
        </div>
        <div class="order-info">
             <h2>订单信息</h2>
             <view>
                 <view class="li">订单编号：{{orderinfos.order_id}} <span @click="setClipboard(orderinfos.order_id)">复制单号</span></view>
                 <view class="li">创建时间：{{orderinfos.addtime}}</view>
                 <view class="li" v-if="!all">付款时间：{{orderinfos.paytime}}</view>
                 <view class="li" v-if="!all">发货时间：{{orderinfos.paytime}}</view>
                 <view class="li" v-if="!all">订单备注：{{orderinfos.beizhu}}</view>
             </view>
             <p @click="seeall" v-if="all">查看更多<i v-if="all" class="hd-icon">&#xe603;</i></p>
        </div>
        <h2 class="order-like"><i class="hd-icon">&#xe608;</i>你可能还喜欢</h2>
        <div class="order-all-goods">
            <view class="ul"  v-for="(lists,indexTab) in goodsList" :key="indexTab">
                <view class="li" v-for="(item,index) in lists" :key="index" @click="go('/pages/goods/details?id='+item.id)">
                    <image mode="widthFix" :src="item.logo">
                    <h3>{{item.title}}</h3>
                    <p><span>￥{{item.price}}</span>{{item.month_sales_count}}人购买</p>
                </view>
            </view>
        </div>
		<fab :topBtn="isTopBtn"></fab>
        <paybottom  @goPay="gopay" :pay="pay"></paybottom>
	</div>
</template>
<script>
import fab from '@/components/fab';
import paybottom from '@/components/paybottom';
import { orderInfo } from '@/api/order';
import { getAuth } from '@/api/user';
export default {
    data() {
    	return {
			isTopBtn:false,
            orderinfos:'',
            goodsList:[[],[]],
            graceFullLoading : false,
            up:false,
            all:true,
            pay:false,
			orderId:''
    	}
    },
	onLoad (e) {
		this.orderId = e.id
        if(e.type==1){
            this.pay=true;
        }
        orderInfo(this.userInfo.username,e.id).then((res)=>{
            if(res.data.status==1){
                this.orderinfos = res.data.datas;
                let lArr = this.goodsList[0];
                let rArr = this.goodsList[1];
                for(var i=0;i< this.orderinfos.LikeGoodsList.length;i++){
                   if (i % 2 == 0) {
                         lArr.push(this.orderinfos.LikeGoodsList[i]);
                     } else {
                         rArr.push(this.orderinfos.LikeGoodsList[i]);
                     }
                   this.goodsList=[lArr, rArr]
               }
            }
        })
	},
    computed:{
      userInfo(){
      	return getAuth();
      }  
    },
	components:{
		fab,
        paybottom
	},
	onPageScroll(e){
		if(e.scrollTop>=400){
			this.isTopBtn=true
		}
		if(e.scrollTop<=100){
			this.isTopBtn=false
		}
	},
	methods:{
		gopay(){
			uni.redirectTo({
			    url: '../shop/payment?orderId='+this.orderId
			});
		},
        go(url){
            uni.navigateTo({
                url
            })
        },
        upIcon(){
            this.up = !this.up
        },
        seeall(){
            this.all =false;
        },
		setClipboard(data){
			uni.setClipboardData({
			    data: data,
			    success: function () {
			    }
			});
		}
	},
}
</script>
<style lang="scss">
    page{
        background: #f2f4f6;
    }
    .order-head{
        width: 710rpx;
        margin:0 auto;
        background: #fff;
        border-radius:20rpx;
        display: flex;
        justify-content: flex-start;
        padding:20rpx 0;
        margin-top:10rpx;
        .order-head-icon{
            display: block;
            width:66rpx;
            height:66rpx;
            color:#fff;
            text-align: center;
            line-height: 66rpx;
            border-radius: 50%;
            background: #ff3434;
            margin-left:20rpx;
            i{
                font-size:36rpx;
            }
        }
        .order-head-desc{
            h3{
                font-weight: bold;
                font-size:26rpx;
                margin-left:20rpx;
                color:#555;
            }
            p{
                font-size:22rpx;
                margin-left:20rpx;
                color:#81838e;
            }
        }
    }
    .order-goods{
        width: 710rpx;
        margin:0 auto;
        background: #fff;
        border-radius:20rpx;
        padding:30rpx 0;
        margin-top:16rpx;
        h2{
            margin-left:20rpx;
            border-left:6rpx solid #ff3434;
            padding-left:16rpx;
            font-size:30rpx;
            line-height: 30rpx;
            color:#343434;
        }
        .order-goods-list{
            width:670rpx;
            margin:0 auto;
            margin-top:30rpx;
            .li{
                display: flex;
                justify-content: space-between;
                margin-bottom:20rpx;
                border-bottom:1px solid #eee;
                padding-bottom:20rpx;
                img{
                    width:140rpx;
                    height:140rpx;
                }
                &>div{
                    width:500rpx;
                    h3{
                        font-size:26rpx;
                        color:#333;
                    }
                    div{
                        display: flex;
                        justify-content: flex-end;
                        margin-top:36rpx;
                        align-items: center;
                        p{
                            &:nth-of-type(1){
                                color:#9E9E9E;
                                font-size:24rpx;
                                margin-right:30rpx;
                            }
                            &:nth-of-type(2){
                                color:#E91E63;
                                font-size:28rpx;
                                font-weight: bold;
                            }
                        }
                    }
                }
            }
        }
        .order-price{
            width:670rpx;
            margin:0 auto;
            margin-bottom:10rpx;
            .li{
                display: flex;
                justify-content: space-between;
                font-size:22rpx;
                color:#666;
                margin-bottom:4rpx;
            }
        }
        .order-price-ing{
            width:670rpx;
            margin:0 auto;
            display: flex;
            justify-content: space-between;
            h3{
                font-size:28rpx;
                color:#858585;
            }
            p{
                 font-size:28rpx;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                color:#f46;
                i{
                    color:#666;
                    font-size:22rpx;
                    margin-left:16rpx;
                }
                span{
                    font-size:22rpx;
                    margin-right:10rpx;
                }
            }
        }
    }
    .order-info{
        width: 710rpx;
        margin:0 auto;
        background: #fff;
        border-radius:20rpx;
        padding:30rpx 0;
        margin-top:16rpx;
        h2{
            margin-left:20rpx;
            border-left:6rpx solid #ff3434;
            padding-left:16rpx;
            font-size:30rpx;
            line-height: 30rpx;
            color:#343434;
        }
        view{
            width:670rpx;
            margin:0 auto;
            margin-top:20rpx;
            .li{
                display: flex;
                justify-content: space-between;
                font-size:24rpx;
                color:#999;
                margin-bottom:10rpx;
                span{
                    color:#f46;
                }
            }
        }
        p{
            display: flex;
            align-items: center;
            justify-content: center;
            font-size:26rpx;
            i{
                display: inline-block;
                margin-left:4rpx;
            }
        }
    }
    .order-like{
        display: flex;
        justify-content: center;
        align-items: center;
        margin:20rpx 0;
        color:#ff537d;
        font-weight: bold;
        font-size:26rpx;
        i{
            color:#ff537d;
            font-size:40rpx;
        }
    }
    .order-all-goods{
        width: 710rpx;
        margin:0 auto;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .ul{
            width:48%;
            .li{
                background: #fff;
                border-radius: 8rpx;
                padding-bottom:20rpx;
                margin-bottom:20rpx;
                image{ 
                    width:100%;
                }
                h3{
                    padding:0 20rpx;
                    color:#343434;
                    font-size:26rpx;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp:2;
                    overflow: hidden;
                }
                p{
                    margin-top:10rpx;
                    padding:0 20rpx;
                    color:#999;
                    font-size:22rpx;
                    span{
                        font-size:26rpx;
                        font-weight: bold;
                        color:#ff537d;
                        margin-right:10rpx;
                    }
                }
            }
        }
    }
</style>